<template>
  <div class="list-item simple row no-wrap items-center relative-position"
    :class="{'cursor-pointer': !!url, hovered: hovered}"
    @click="itemClicked"
    @mouseenter="hovered = true"
    @mouseleave="hovered = false">

    <div class="dot" v-if="dot"></div>
    <div class="item-content col">
      <div
        class="title full-width"
        :class="{
          hovered: hovered,
          ellipsis: true }">{{ title }}</div>

    </div>
    <div class="date" v-if="date">{{date | normalDate}}</div>
  </div>
</template>

<script>
export default {
  name: 'SimpleListItem',
  props: {
    label: { type: String },
    date: { type: String },
    title: { type: String },
    url: { type: String },
    dot: { type: Boolean, default: true },
  },
  data() {
    return {
      hovered: false,
    };
  },
  methods: {
    itemClicked() {
      if (this.$route.params.id && this.url.endsWith(`/${this.$route.params.id}`)) return;

      if (this.url) {
        this.$router.push(this.url);
      }

      this.$emit('clicked');
    },
  },
};
</script>

<style lang="scss" scoped>
.list-item {
  .dot {
    height: 4px;
    width: 4px;
    background-color: $primary;

    border-radius: 50%;
  }
  .item-content {
    margin-left: 16px;
    flex-grow: 1;
    padding-right: 28px;
    .title {
      font-size: 16px;
      color: #2b3a45CC;
      line-height: 2rem;

      &.hovered {
        color: $primary;
      }
    }
  }

  .date {
    color: #ADADAD;
  }

  &.hovered {
    background-color: rgba(0,0,0,0.02);
  }
}
</style>
